<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">申请提现</block> 
		</cu-custom>
		<loading-view v-if="showLoading"></loading-view>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="user_wallet_a">
				<view class="user_wallet_a_a">
					<view class="user_wallet_a_a_a">当前可提现金额</view>
					<view class="user_wallet_a_a_b"><span>¥</span>{{widthDrawConfig.earnings}}</view>
				</view>
				<view class="user_wallet_a_b" @tap="goPage('/pages/user/user_withdraw_code')">提现明细</view>
			</view>
			<view class="user_withdraw_a">
				<view class="user_withdraw_a_a">
					<view class="user_withdraw_a_a_a">提取至</view>
					<view class="user_withdraw_a_a_b" :style="'background-image:url('+type_img+');'">{{type_name}}</view>
				</view>
				<view class="user_withdraw_a_b">
					<view class="user_withdraw_a_b_a">￥</view>
					<view class="user_withdraw_a_b_b">
						<input v-model="money" :placeholder="'可提现'+widthDrawConfig.earnings+'元'"/>
					</view>
					<view class="user_withdraw_a_b_c" @click="able_withdraw(widthDrawConfig)">全部</view>
				</view>
				<view class="user_withdraw_a_c">
					<view class="user_withdraw_a_c_a">预计到账时间24小时内,如有疑问请</view>
					<button open-type="contact" class="user_withdraw_a_c_b">联系客服</button>
				</view>
			</view>
			<view class="user_withdraw_a_d" @tap="applyWithdrawFun()">申请提现</view>
		</view>
		<u-popup :show="pay_show" mode="bottom">
			<view class="content_a">
				<view class="content_a_a">
					<view class="content_a_a_a" @click="pay_qx()">取消</view>
					<view class="content_a_a_b">提现至</view>
					<view class="content_a_a_c" @click="pay_qd()">确定</view>
				</view>
				<view class="content_a_b">
					<view class="content_a_b_a" @click="pay_click(2)" :class="type==2?'content_a_b_aa':''">
						<view class="content_a_b_a_a" :style="'background-image:url('+user_wx+');'">微信</view>
						<view class="content_a_b_a_b" :style="'background-image:url('+(type==2?'/static/y_xz.png':'/static/w_xz.png')+');'"></view>
					</view>
					<view class="content_a_b_a" @click="pay_click(6)" :class="type==6?'content_a_b_aa':''">
						<view class="content_a_b_a_a" :style="'background-image:url('+user_zfb+');'">支付宝</view>
						<view class="content_a_b_a_b" :style="'background-image:url('+(type==6?'/static/y_xz.png':'/static/w_xz.png')+');'"></view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import request from '@/common/request.js';	
import {
	loadingType
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			pay_show:false,
			uid:0,
			money: '',
			baseUrl_img:request.baseUrl_img,
			type_img:request.baseUrl_img+'/img/user_wx.png',
			type_name:'微信',
			type:2,
			xp_icon_xp:request.baseUrl_img+'/img/xp_icon_xp.png',
			user_zfb:request.baseUrl_img+'/img/user_zfb.png',
			user_wx:request.baseUrl_img+'/img/user_wx.png',
			user_yhk:request.baseUrl_img+'/img/user_yhk.png',
			widthDrawConfig: {},
		}
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
		this.getWithdrawConfigFun();
	},
	mounted() {
		//this.home_post();
	},
	methods: {
		pay_zk(){
			this.pay_show=true;
		},
		pay_qx(){
			this.pay_show=false;
		},
		pay_qd(){
			if(this.type==2){
				this.type_name='微信';
				this.type_img=this.user_wx;
			}
			if(this.type==6){
				this.type_name='支付宝';
				this.type_img=this.user_zfb;
			}
			this.pay_show=false;
		},
		pay_click(n){
			this.type=n;
		},
		able_withdraw(info){
			this.money=info.earnings;
		},
		goPage(url) {
			uni.navigateTo({
				url
			});
		},
		// 申请提现
		applyWithdrawFun() {
			let {
				money,
				type,
				uid
			} = this;
			if (!money) {
				uni.showToast({
				    title:'请输入提现金额',
					icon:'none',
				    duration: 2000
				});
				return;
			}
			const paramsList = {
				money: money,
				type:type,
				uid: uid
			};
			let optsList = {
				url:'u-withdrawapply',
				method: 'post'
			};
			let _this=this;
			uni.showLoading({
				title: '提交中...',
				mask: true
			})
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.showToast({
				    title: res.data.msg,
					icon:'none',
				    duration: 2000
				});
				uni.hideLoading();
				if(res.data.code == 200){
					_this.money='';
					_this.getWithdrawConfigFun();
				}
			});
		},
		getWithdrawConfigFun() {
			let paramsList = {
				'uid':this.uid
			}
			let optsList = {
				url: 'u-role_config',
				method: 'post'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					_this.widthDrawConfig=res.data.data.user_info;
				}
				this.showLoading=false;
			});
		},
	}
}
</script>

<style  lang="scss" scoped>
	button::after{
		border: 0;
	}
	button{
		background-color:#FFFFFF;
		padding-left: 0;
		padding-right: 0;
	}
	.content_a{
		width: 750rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 0 40rpx;
	}
	.content_a_a{
		width: 664rpx;
		height: 136rpx;
		line-height: 136rpx;
	}
	.content_a_a_a{
		width: 136rpx;
		height: 136rpx;
		line-height: 136rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		float: left;
		text-align: center;
	}
	.content_a_a_b{
		width: 392rpx;
		height: 136rpx;
		line-height: 136rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		float: left;
		text-align: center;
	}
	.content_a_a_c{
		width: 136rpx;
		height: 136rpx;
		line-height: 136rpx;
		float: left;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #263D81;
		text-align: right;
	}
	.content_a_b{
		overflow: hidden;
		width: 664rpx;
		height: auto;
	}
	.content_a_b_a{
		width: 664rpx;
		height: 134rpx;
		background: #fff;
		border-radius: 20rpx;
		line-height: 80rpx;
		margin-bottom:30rpx;
		padding: 28rpx 27rpx;
	}
	.content_a_b_aa{
		background: #FCFCFC;
	}
	.content_a_b_a_a{
		padding-left: 104rpx;
		background-position: left;
		background-repeat: no-repeat;
		background-size: 80rpx;
		height: 80rpx;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.content_a_b_a_b{
		height: 80rpx;
		width: 80rpx;
		float: right;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 35rpx;
	}
	.user_wallet_a{
		width: 750rpx;
		height:auto;
		background-color: #fff;
		padding: 46rpx 40rpx;
		overflow: hidden;
	}
	.user_wallet_a_a{
		float: left;
		overflow: hidden;
	}
	.user_wallet_a_a_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
	}
	.user_wallet_a_a_b{
		font-size: 80rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E71102;
	}
	.user_wallet_a_a_b span{
		font-size: 36rpx;
	}
	.user_wallet_a_b{
		float:right;
		width: 145rpx;
		height: 60rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E71102;
		line-height: 60rpx;
		text-align:center;
		margin-top: 10rpx;
	}
	
	.user_withdraw_a{
		width: 702rpx;
		height:auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 49rpx 30rpx;
		margin: auto;
		margin-top: 20rpx;
		overflow: hidden;
	}
	.user_withdraw_a_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-right: 39rpx;
		background-position:right;
		background-repeat: no-repeat;
		background-size: 9rpx 19rpx;
		overflow: hidden;
	}
	.user_withdraw_a_a_a{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		float: left;
	}
	.user_withdraw_a_a_b{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: right;
		background-position: left;
		background-repeat: no-repeat;
		background-size: 40rpx;
		line-height: 40rpx;
		padding-left: 51rpx;
	}
	.user_withdraw_a_b{
		width: 650rpx;
		height: 130rpx;
		margin-top: 50rpx;
		background: #F1F2F3;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.user_withdraw_a_b_a{
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666666;
		line-height: 130rpx;
		float: left;
	}
	.user_withdraw_a_b_b{
		float: left;
		margin-left: 15rpx;
		line-height: 130rpx;
		height: 130rpx;
		width: 380rpx;
		color: #666666;
	}
	.user_withdraw_a_b_b input{
		line-height: 130rpx;
		height: 130rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		width: 380rpx;
	}
	.user_withdraw_a_b_c{
		float: right;
		width: 80rpx;
		line-height: 130rpx;
		height: 130rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E71102;
	}
	.user_withdraw_a_c{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-top:20rpx;
		line-height: 40rpx;
	}
	.user_withdraw_a_c_a{
		float: left;
	}
	.user_withdraw_a_c_b{
		float: left;
		color: #E71102;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 40rpx;
	}
	.user_withdraw_a_d{
		width:600rpx;
		height: 90rpx;
		background: linear-gradient(-90deg, #E71102, #E71102);
		border-radius: 42rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin: auto;
		margin-top: 60rpx;
	}
</style>
